<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
	<style>
        #editor {  }
        #workplace {
            width: 70%;
            height: 100%;
            border: 2px solid black;
            min-height: 650px;
            line-height: 650px;
            text-align:center;
        }
        #items {
            width: 25%;
            margin-left: 2%;
            border: 2px dashed gray;
            position: fixed;
            right: 10px;
            top: 10px;
            min-height: 350px;
        }
        #items > .item {
            height: 90px;
            margin: 5px;
            border: 3px solid red;
            text-align: center;
            line-height: 90px;
        }
	</style>
  </head>
  <body>

    <div id="editor">
        <div id="workplace" > 拖到这里
        </div>
        <nav id="items"> 
            <div class="item" draggable="true" data-pos="1">拖我 1</div>
            <div class="item" draggable="true" data-pos="2">拖我 2</div>
            <div class="item" draggable="true" data-pos="3">拖我 3</div>
            <div class="item" draggable="true" data-pos="4">拖我 4</div>
        </nav>
    </div>

    <script src="jquery-2.2.0.min.js"></script>
    <script>
        $(function() {
            $('.item').on('dragstart', function(event) {
                event.originalEvent.dataTransfer.setData('pos', $(this).data('pos'));
            });
            $('#workplace').on('dragover', function(event) {
                event.originalEvent.preventDefault();
            });
            $('#workplace').on('drop', function(event) {
                var pos = event.originalEvent.dataTransfer.getData('pos');
                $(this).html('你把' + pos + '放进去啦~');
            });
        
        });
    </script>
  </body>
</html>
